<template>
	<view>
		<UninavBar title="商品详情" leftText="返回" leftIcon="left" rightText="..." @clickRight="clickRight"></UninavBar>
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<image :src="item.url" mode="" style="height: 30vh;width: 100vw;"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="" style="padding: 0 20rpx;background-color: #fff;display: flex;flex-direction: column;">
			<uni-title type="h4" title="科大982换电月套餐"></uni-title>
			<text style="font-size: 20rpx;margin: 0  0 30rpx 0;">售价：<text style="color: red;">￥239.00</text></text>
			<text class="text_box">运费：免运费</text>
			<view class="">
				<uni-icons type="info-filled" size="15"></uni-icons>
				<text class="text_box">该商品骑栖科技提供，本平台已认证</text>
			</view>
		</view>
		<view class="statistics display_between">
			<view class="">
				<uni-icons type="heart" size="18"></uni-icons>
				<text>2399</text>
			</view>
			<view class="review">
				<uni-icons type="undo" size="18"></uni-icons>
				<text>156</text>
			</view>
			<view class="">
				<uni-icons type="star" size="18"></uni-icons>
				<text>23</text>
			</view>
		</view>

		<view class="display_between sience">
			<view class="">
				<uni-icons type="shop-filled" size="18"></uni-icons>
				<text>骑栖科技</text>
			</view>
			<view class="">
				<text style="color: #DFDFDF;">进入店铺</text>
				<uni-icons type="right" size="18" color=" #DFDFDF"></uni-icons>
			</view>
		</view>
		<view class="display_between statistics">
			<view v-for="(item,index) in newList" :key="index" :class="{review:index===1}" @click="choseItem(index)">
				<view class="" :class="[choseIndex===index?'choseBox':'']" style="font-size: 20rpx;">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="cardBox" v-show="choseIndex===0">
			<text style="font-size: 24rpx;">购买套餐赠送4000积分，套餐开通时间9：00~18：00，购买套餐后大约2小时内到账</text>
		</view>
		<view class="cardBox" v-show="choseIndex===1">
			<view class="rating">
				<text style="color: red;">0%</text>
				<text>好评率</text>
			</view>
			<view class="cardBox_number">
				<view>
					<text>好评</text>
					<progress :percent="2" show-info stroke-width="3" :font-size='12' style="width: 350rpx;" />
				</view>
				<view>
					<text>中评</text>
					<progress :percent="2" show-info stroke-width="3" :font-size='12' style="width: 350rpx;" />
				</view>
				<view>
					<text>差评</text>
					<progress :percent="2" show-info stroke-width="3" :font-size='12' style="width: 350rpx;" />
				</view>
			</view>
		</view>
		<view class="circle display_column" v-show="choseIndex===2">
			<view class="" style="min-height: 150rpx;">
				<text style="font-size: 24rpx;">当前商品还没有秀，赶快进入商品圈发布第一条秀吧：）</text>
			</view>
			<view class="jump_text">
				<uni-title type="h4" title="进入商品圈查看更多" align="center"></uni-title>
				<uni-icons type="right" size="18"></uni-icons>
			</view>
		</view>
		<view class="display_between deparBox">
			<view class="customer display_column">
				<uni-icons type="chat" size="25"></uni-icons>
				<text style="font-size: 24rpx;">客服</text>
			</view>
			<view class="customer">
				<uni-badge :text="8" absolute="rightTop" :offset="[5, 5]" size="small">
					<view class="display_column">
						<uni-icons type="cart-filled" size="25"></uni-icons>
						<text style="font-size: 24rpx;">购物车</text>
					</view>
				</uni-badge>
			</view>
			<button style="width: 200rpx;font-size: 24rpx;background-color: #FF9503;color: #fff;" @click="open">加入购物车</button>
			<button style="width: 200rpx;font-size: 24rpx;background-color: #FD5100;color: #fff;" @click="open">立即兑换</button>
		</view>
		<uni-popup ref="popup" type="bottom" >
			<view class="" >
			<view class="" style="background-color: #fff;padding: 20rpx;">
				<uni-icons type="closeempty" size="20" style="float: right;" color="#DFDFDF" ></uni-icons>
				<view class="" style="display: flex;align-items: center;gap: 20rpx;">
					<image :src="$imagePath.productIcon" mode="" style="width: 100rpx;height: 100rpx;"></image>
					<view class="" style="display: flex;
					flex-direction: column;justify-content: space-around;height: 100rpx;">
						<text>科达982换电月套餐</text>
						<text>￥239.00</text>
					</view>
				</view>
				</view>
				<view class=""  style="background-color: #DFDFDF;padding: 20rpx;">
					<uni-title type="h4" title="数量"></uni-title>
					<text>￥239.00</text>
					
					<button style="width: 300rpx;font-size: 24rpx;background-color: #FD5100;color: #fff;" >兑换</button>
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				choseIndex: 0,
				current: 0,
				mode: 'round',
				info: [{
					url: this.$imagePath.imageOne,
				}, {
					url: this.$imagePath.imageTwo,
				}, {
					url: this.$imagePath.imageThree,
				}],
				newList: [{
					icon: '',
					title: '详情'
				}, {
					icon: '',
					title: '评论'
				}, {
					icon: '',
					title: '圈子秀'
				}]
			}
		},
		methods: {
			clickRight() {
				console.log('点击时间');
			},
			choseItem(index) {
				this.choseIndex = index
			},
			open(){
				 this.$refs.popup.open('bottom')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-box {
		height: 30vh;
	}

	.text_box {
		font-size: 18rpx;
		color: #909399;
		margin: 8rpx 0;
	}

	.statistics {
		border-top: 1px solid #DFDFDF;
		background-color: #fff;

		>view {
			width: 33%;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			padding: 20rpx 0;
			font-size: 24rpx;
		}
	}

	.sience {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx 0;
		font-size: 24rpx;

		>view {
			display: flex;
			align-items: center;
			gap: 10rpx;
		}
	}

	.choseBox {
		color: #fff;
		background-color: #828282;
		text-align: center;
		padding: 10rpx;
		min-width: 100rpx;
		border-radius: 10rpx;
	}

	.cardBox {
		padding: 0 20rpx;
		background-color: #fff;
		min-height: 200rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.rating {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 40rpx;

	}

	.cardBox_number {
		>view {
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-size: 24rpx;
		}
	}

	.circle {
		padding: 0 20rpx;
		background-color: #fff;
		min-height: 200rpx;
		margin-top: 20rpx;

	}

	.deparBox {
		position: fixed;
		bottom: 0;
		gap: 40rpx;
		background-color: #fff;
		padding: 10px 0;
		width: 100%;
	}

	.jump_text {
		display: flex;
		align-items: center;
		border-top: 1px solid #DFDFDF;
		border-bottom: 1px solid #DFDFDF;
		width: 100%;
	}

	.review {
		border-left: 1px solid #DFDFDF;
		border-right: 1px solid #DFDFDF;
	}

	.display_between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.display_column {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.customer {
		width: 110rpx;
	}
</style>
